<template>
  <div class="report-records">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <img class="h-8 w-auto" src="/logo.png" alt="学生健康上报系统" />
              <span class="ml-2 text-xl font-bold text-gray-800">学生健康上报系统</span>
            </div>
          </div>
          <div class="flex items-center">
            <div class="ml-3 relative">
              <div class="flex items-center space-x-4">
                <Bell class="h-5 w-5 text-gray-500" />
                <div class="flex items-center">
                  <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="" />
                  <span class="ml-2 text-sm font-medium text-gray-700">王校长</span>
                  <ChevronDown class="ml-1 h-4 w-4 text-gray-500" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="flex">
      <!-- 侧边栏 -->
      <aside class="w-64 bg-gray-800 min-h-screen">
        <nav class="mt-5 px-2">
          <div class="space-y-1">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <LayoutDashboard class="mr-3 h-5 w-5" />
              数据看板
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Users class="mr-3 h-5 w-5" />
              学院管理
            </a>
            <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <ClipboardList class="mr-3 h-5 w-5" />
              上报记录
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <AlertTriangle class="mr-3 h-5 w-5" />
              异常管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <FileText class="mr-3 h-5 w-5" />
              统计报表
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Settings class="mr-3 h-5 w-5" />
              系统设置
            </a>
          </div>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="flex-1 bg-gray-100 p-6">
        <div class="max-w-7xl mx-auto">
          <!-- 页面标题 -->
          <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">上报记录</h1>
            <p class="mt-1 text-sm text-gray-500">查看和管理全校学生健康上报记录</p>
          </div>

          <!-- 统计卡片 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                    <Users class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">今日上报总数</dt>
                      <dd class="flex items-baseline">
                        <div class="text-2xl font-semibold text-gray-900">{{ stats.todayTotal }}</div>
                        <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                          <ArrowUp class="self-center flex-shrink-0 h-4 w-4 text-green-500" />
                          <span class="sr-only">增加</span>
                          {{ stats.todayTotalIncrease }}%
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                    <CheckCircle class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">正常上报数</dt>
                      <dd class="flex items-baseline">
                        <div class="text-2xl font-semibold text-gray-900">{{ stats.normalCount }}</div>
                        <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                          <span>{{ stats.normalRate }}%</span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
                    <AlertCircle class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">异常上报数</dt>
                      <dd class="flex items-baseline">
                        <div class="text-2xl font-semibold text-gray-900">{{ stats.abnormalCount }}</div>
                        <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                          <ArrowUp v-if="stats.abnormalIncrease > 0" class="self-center flex-shrink-0 h-4 w-4 text-red-500" />
                          <ArrowDown v-else class="self-center flex-shrink-0 h-4 w-4 text-green-500" />
                          <span class="sr-only">{{ stats.abnormalIncrease > 0 ? '增加' : '减少' }}</span>
                          {{ Math.abs(stats.abnormalIncrease) }}%
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
                    <XCircle class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">未上报数</dt>
                      <dd class="flex items-baseline">
                        <div class="text-2xl font-semibold text-gray-900">{{ stats.notReportedCount }}</div>
                        <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                          <span>{{ stats.notReportedRate }}%</span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 搜索和筛选 -->
          <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">学院</label>
                <select 
                  v-model="filters.college"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="">全部学院</option>
                  <option v-for="college in colleges" :key="college.id" :value="college.id">{{ college.name }}</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">上报状态</label>
                <select 
                  v-model="filters.status"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="">全部状态</option>
                  <option value="normal">正常</option>
                  <option value="abnormal">异常</option>
                  <option value="not_reported">未上报</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">上报日期</label>
                <div class="flex space-x-2">
                  <input 
                    type="date" 
                    v-model="filters.startDate"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  >
                  <span class="flex items-center text-gray-500">至</span>
                  <input 
                    type="date" 
                    v-model="filters.endDate"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  >
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">关键词搜索</label>
                <div class="relative">
                  <input 
                    type="text" 
                    v-model="filters.keyword"
                    placeholder="学号/姓名/班级" 
                    class="pl-8 pr-4 py-2 w-full border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  >
                  <Search class="w-4 h-4 text-gray-400 absolute left-2.5 top-2.5" />
                </div>
              </div>
            </div>
            <div class="flex justify-end mt-4">
              <button 
                @click="applyFilters"
                class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors"
              >
                筛选
              </button>
              <button 
                @click="resetFilters"
                class="ml-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors"
              >
                重置
              </button>
              <button 
                @click="exportData"
                class="ml-2 px-4 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 transition-colors flex items-center"
              >
                <Download class="w-4 h-4 mr-1" />
                导出
              </button>
            </div>
          </div>

          <!-- 记录列表 -->
          <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生信息</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学院/班级</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">体温</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">健康状况</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(record, index) in records" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-full" :src="record.avatar" alt="" />
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-gray-900">{{ record.name }}</div>
                          <div class="text-sm text-gray-500">{{ record.studentId }}</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-gray-900">{{ record.college }}</div>
                      <div class="text-sm text-gray-500">{{ record.className }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-gray-900">{{ record.reportDate }}</div>
                      <div class="text-sm text-gray-500">{{ record.reportTime }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div 
                        :class="{
                          'text-sm font-medium': true,
                          'text-green-600': record.temperature < 37.3,
                          'text-red-600': record.temperature >= 37.3
                        }"
                      >
                        {{ record.temperature }}°C
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-gray-900">{{ record.healthStatus }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span 
                        :class="{
                          'px-2 py-1 text-xs rounded-full': true,
                          'bg-green-100 text-green-800': record.status === 'normal',
                          'bg-yellow-100 text-yellow-800': record.status === 'abnormal',
                          'bg-red-100 text-red-800': record.status === 'not_reported'
                        }"
                      >
                        {{ statusText[record.status] }}
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <button 
                        @click="viewRecordDetail(record)"
                        class="text-blue-600 hover:text-blue-900 mr-2"
                      >
                        查看
                      </button>
                      <button 
                        v-if="record.status === 'abnormal'"
                        @click="handleAbnormal(record)"
                        class="text-red-600 hover:text-red-900"
                      >
                        处理
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 分页 -->
          <div class="flex items-center justify-between">
            <div class="flex-1 flex justify-between sm:hidden">
              <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                上一页
              </a>
              <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                下一页
              </a>
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
              <div>
                <p class="text-sm text-gray-700">
                  显示第 <span class="font-medium">1</span> 至 <span class="font-medium">10</span> 条，共 <span class="font-medium">{{ totalRecords }}</span> 条
                </p>
              </div>
              <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                  <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">上一页</span>
                    <ChevronLeft class="h-5 w-5" />
                  </a>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    1
                  </a>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600 hover:bg-blue-100">
                    2
                  </a>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    3
                  </a>
                  <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                  </span>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    8
                  </a>
                  <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">下一页</span>
                    <ChevronRight class="h-5 w-5" />
                  </a>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 记录详情弹窗 -->
    <div v-if="showRecordDetailDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-2xl w-full p-5">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium text-gray-800">上报记录详情</h3>
          <button @click="showRecordDetailDialog = false" class="text-gray-400 hover:text-gray-500">
            <X class="h-5 w-5" />
          </button>
        </div>
        
        <div class="border-t border-gray-200 pt-4">
          <!-- 学生基本信息 -->
          <div class="flex items-center mb-6">
            <img class="h-16 w-16 rounded-full" :src="selectedRecord.avatar" alt="" />
            <div class="ml-4">
              <h4 class="text-lg font-medium text-gray-900">{{ selectedRecord.name }}</h4>
              <p class="text-sm text-gray-500">{{ selectedRecord.studentId }} | {{ selectedRecord.college }} | {{ selectedRecord.className }}</p>
            </div>
            <div 
              :class="{
                'ml-auto px-3 py-1 rounded-full text-sm font-medium': true,
                'bg-green-100 text-green-800': selectedRecord.status === 'normal',
                'bg-yellow-100 text-yellow-800': selectedRecord.status === 'abnormal',
                'bg-red-100 text-red-800': selectedRecord.status === 'not_reported'
              }"
            >
              {{ statusText[selectedRecord.status] }}
            </div>
          </div>
          
          <!-- 上报详情 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-1">上报时间</h4>
              <p class="text-sm text-gray-900">{{ selectedRecord.reportDate }} {{ selectedRecord.reportTime }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-1">上报位置</h4>
              <p class="text-sm text-gray-900">{{ selectedRecord.location || '未提供' }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-1">体温</h4>
              <p 
                :class="{
                  'text-sm font-medium': true,
                  'text-green-600': selectedRecord.temperature < 37.3,
                  'text-red-600': selectedRecord.temperature >= 37.3
                }"
              >
                {{ selectedRecord.temperature }}°C
              </p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-1">健康状况</h4>
              <p class="text-sm text-gray-900">{{ selectedRecord.healthStatus }}</p>
            </div>
            <div class="md:col-span-2">
              <h4 class="text-sm font-medium text-gray-500 mb-1">备注</h4>
              <p class="text-sm text-gray-900">{{ selectedRecord.remark || '无' }}</p>
            </div>
          </div>
          
          <!-- 异常信息 -->
          <div v-if="selectedRecord.status === 'abnormal'" class="mb-6">
            <h4 class="font-medium text-gray-800 mb-2">异常信息</h4>
            <div class="bg-yellow-50 p-4 rounded-lg">
              <div class="flex">
                <AlertTriangle class="h-5 w-5 text-yellow-400" />
                <div class="ml-3">
                  <h3 class="text-sm font-medium text-yellow-800">异常原因</h3>
                  <div class="mt-2 text-sm text-yellow-700">
                    <p>{{ selectedRecord.abnormalReason }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 处理记录 -->
          <div v-if="selectedRecord.handlingRecords && selectedRecord.handlingRecords.length > 0" class="mb-6">
            <h4 class="font-medium text-gray-800 mb-2">处理记录</h4>
            <div class="space-y-4">
              <div v-for="(record, index) in selectedRecord.handlingRecords" :key="index" class="bg-gray-50 p-4 rounded-lg">
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-900">{{ record.handler }}</span>
                  <span class="text-sm text-gray-500">{{ record.time }}</span>
                </div>
                <p class="mt-1 text-sm text-gray-700">{{ record.action }}</p>
                <p class="mt-1 text-sm text-gray-500">{{ record.remark }}</p>
              </div>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="flex justify-end space-x-3 mt-6">
            <button 
              v-if="selectedRecord.status === 'abnormal'"
              @click="handleAbnormal(selectedRecord)"
              class="px-4 py-2 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition-colors"
            >
              处理异常
            </button>
            <button 
              @click="showRecordDetailDialog = false" 
              class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
            >
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 处理异常弹窗 -->
    <div v-if="showHandleAbnormalDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-md w-full p-5">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium text-gray-800">处理异常上报</h3>
          <button @click="showHandleAbnormalDialog = false" class="text-gray-400 hover:text-gray-500">
            <X class="h-5 w-5" />
          </button>
        </div>
        
        <div class="border-t border-gray-200 pt-4">
          <form @submit.prevent="submitHandleAbnormal">
            <div class="mb-4">
              <label class="block text-sm font-medium text-gray-700 mb-1">学生信息</label>
              <div class="flex items-center">
                <img class="h-10 w-10 rounded-full" :src="selectedRecord.avatar" alt="" />
                <div class="ml-3">
                  <p class="text-sm font-medium text-gray-900">{{ selectedRecord.name }}</p>
                  <p class="text-sm text-gray-500">{{ selectedRecord.studentId }}</p>
                </div>
              </div>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-gray-700 mb-1">异常原因</label>
              <div class="bg-yellow-50 p-3 rounded-lg text-sm text-yellow-700 mb-2">
                {{ selectedRecord.abnormalReason }}
              </div>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-gray-700 mb-1">处理方式</label>
              <select 
                v-model="abnormalHandling.action"
                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
              >
                <option value="">请选择处理方式</option>
                <option value="contact">电话联系</option>
                <option value="visit">上门访问</option>
                <option value="medical">医疗干预</option>
                <option value="isolation">隔离观察</option>
                <option value="other">其他方式</option>
              </select>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-gray-700 mb-1">处理结果</label>
              <select 
                v-model="abnormalHandling.result"
                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
              >
                <option value="">请选择处理结果</option>
                <option value="resolved">已解决</option>
                <option value="monitoring">持续监测</option>
                <option value="escalated">已上报</option>
                <option value="false_alarm">误报</option>
              </select>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-gray-700 mb-1">处理备注</label>
              <textarea 
                v-model="abnormalHandling.remark" 
                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                rows="3"
                placeholder="请输入处理过程和结果的详细说明"
                required
              ></textarea>
            </div>
            
            <div class="flex space-x-3 mt-6">
              <button 
                type="submit" 
                class="flex-1 py-2 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors"
              >
                提交
              </button>
              <button 
                type="button"
                @click="showHandleAbnormalDialog = false" 
                class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
              >
                取消
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  Bell,
  ChevronDown,
  LayoutDashboard,
  Users,
  ClipboardList,
  AlertTriangle,
  FileText,
  Settings,
  Search,
  ChevronLeft,
  ChevronRight,
  X,
  ArrowUp,
  ArrowDown,
  CheckCircle,
  AlertCircle,
  XCircle,
  Download
} from 'lucide-vue-next';

// 统计数据
const stats = ref({
  todayTotal: 3250,
  todayTotalIncrease: 5,
  normalCount: 3100,
  normalRate: 95.4,
  abnormalCount: 50,
  abnormalIncrease: 2,
  notReportedCount: 100,
  notReportedRate: 3.1
});

// 筛选条件
const filters = ref({
  college: '',
  status: '',
  startDate: '',
  endDate: '',
  keyword: ''
});

// 学院列表
const colleges = ref([
  { id: 'CS001', name: '计算机学院' },
  { id: 'ME002', name: '机械工程学院' },
  { id: 'EM003', name: '经济管理学院' },
  { id: 'FL004', name: '外国语学院' },
  { id: 'AD005', name: '艺术设计学院' }
]);

// 状态文本映射
const statusText = {
  normal: '正常',
  abnormal: '异常',
  not_reported: '未上报'
};

// 记录列表
const records = ref([
  {
    name: '张三',
    studentId: '2020001001',
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    college: '计算机学院',
    className: '计算机科学与技术2001班',
    reportDate: '2023-05-15',
    reportTime: '08:15:30',
    temperature: 36.5,
    healthStatus: '健康',
    status: 'normal',
    location: '北京市海淀区学院路15号',
    remark: '一切正常'
  },
  {
    name: '李四',
    studentId: '2020001002',
    avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
    college: '计算机学院',
    className: '计算机科学与技术2001班',
    reportDate: '2023-05-15',
    reportTime: '08:30:45',
    temperature: 37.5,
    healthStatus: '轻微咳嗽',
    status: 'abnormal',
    location: '北京市海淀区学院路15号',
    remark: '昨晚睡眠不足',
    abnormalReason: '体温异常(37.5°C)，报告轻微咳嗽症状',
    handlingRecords: [
      {
        handler: '王辅导员',
        time: '2023-05-15 09:15:30',
        action: '电话联系',
        remark: '学生表示昨晚睡眠不足，无其他不适'
      }
    ]
  },
  {
    name: '王五',
    studentId: '2020001003',
    avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
    college: '计算机学院',
    className: '计算机科学与技术2001班',
    reportDate: '2023-05-15',
    reportTime: '07:45:12',
    temperature: 36.3,
    healthStatus: '健康',
    status: 'normal',
    location: '北京市海淀区学院路15号',
    remark: ''
  },
  {
    name: '赵六',
    studentId: '2020001004',
    avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
    college: '计算机学院',
    className: '计算机科学与技术2001班',
    reportDate: '',
    reportTime: '',
    temperature: 0,
    healthStatus: '',
    status: 'not_reported',
    location: '',
    remark: ''
  },
  {
    name: '钱七',
    studentId: '2020002001',
    avatar: 'https://randomuser.me/api/portraits/women/1.jpg',
    college: '机械工程学院',
    className: '机械设计2002班',
    reportDate: '2023-05-15',
    reportTime: '08:05:22',
    temperature: 36.7,
    healthStatus: '健康',
    status: 'normal',
    location: '北京市海淀区学院路15号',
    remark: ''
  },
  {
    name: '孙八',
    studentId: '2020002002',
    avatar: 'https://randomuser.me/api/portraits/women/2.jpg',
    college: '机械工程学院',
    className: '机械设计2002班',
    reportDate: '2023-05-15',
    reportTime: '08:12:33',
    temperature: 36.8,
    healthStatus: '健康',
    status: 'normal',
    location: '北京市海淀区学院路15号',
    remark: ''
  },
  {
    name: '周九',
    studentId: '2020003001',
    avatar: 'https://randomuser.me/api/portraits/women/3.jpg',
    college: '经济管理学院',
    className: '金融学2003班',
    reportDate: '2023-05-15',
    reportTime: '07:55:18',
    temperature: 37.8,
    healthStatus: '发热、咳嗽',
    status: 'abnormal',
    location: '北京市海淀区学院路15号',
    remark: '昨天淋雨了',
    abnormalReason: '体温异常(37.8°C)，报告发热、咳嗽症状',
    handlingRecords: [
      {
        handler: '李辅导员',
        time: '2023-05-15 08:30:00',
        action: '电话联系',
        remark: '学生表示昨天淋雨，已经服用感冒药'
      },
      {
        handler: '李辅导员',
        time: '2023-05-15 10:15:00',
        action: '上门访问',
        remark: '已陪同学生前往校医院就诊'
      }
    ]
  },
  {
    name: '吴十',
    studentId: '2020003002',
    avatar: 'https://randomuser.me/api/portraits/women/4.jpg',
    college: '经济管理学院',
    className: '金融学2003班',
    reportDate: '',
    reportTime: '',
    temperature: 0,
    healthStatus: '',
    status: 'not_reported',
    location: '',
    remark: ''
  }
]);

// 总记录数
const totalRecords = ref(3350);

// 弹窗控制
const showRecordDetailDialog = ref(false);
const showHandleAbnormalDialog = ref(false);

// 选中的记录
const selectedRecord = ref({});

// 异常处理表单
const abnormalHandling = ref({
  action: '',
  result: '',
  remark: ''
});

// 应用筛选
const applyFilters = () => {
  console.log('应用筛选:', filters.value);
  // 实际应用中，这里会调用API获取筛选后的数据
};

// 重置筛选
const resetFilters = () => {
  filters.value = {
    college: '',
    status: '',
    startDate: '',
    endDate: '',
    keyword: ''
  };
};

// 导出数据
const exportData = () => {
  console.log('导出数据');
  // 实际应用中，这里会调用API导出数据
};

// 查看记录详情
const viewRecordDetail = (record) => {
  selectedRecord.value = record;
  showRecordDetailDialog.value = true;
};

// 处理异常
const handleAbnormal = (record) => {
  selectedRecord.value = record;
  abnormalHandling.value = {
    action: '',
    result: '',
    remark: ''
  };
  showHandleAbnormalDialog.value = true;
};

// 提交异常处理
const submitHandleAbnormal = () => {
  console.log('提交异常处理:', abnormalHandling.value);
  
  // 添加处理记录
  if (!selectedRecord.value.handlingRecords) {
    selectedRecord.value.handlingRecords = [];
  }
  
  selectedRecord.value.handlingRecords.push({
    handler: '王校长',
    time: new Date().toLocaleString(),
    action: getActionText(abnormalHandling.value.action),
    remark: abnormalHandling.value.remark
  });
  
  // 如果处理结果为已解决或误报，则将状态改为正常
  if (abnormalHandling.value.result === 'resolved' || abnormalHandling.value.result === 'false_alarm') {
    selectedRecord.value.status = 'normal';
    
    // 更新统计数据
    stats.value.abnormalCount--;
    stats.value.normalCount++;
    stats.value.normalRate = ((stats.value.normalCount / stats.value.todayTotal) * 100).toFixed(1);
  }
  
  // 关闭弹窗
  showHandleAbnormalDialog.value = false;
};

// 获取处理方式文本
const getActionText = (action) => {
  const actionMap = {
    contact: '电话联系',
    visit: '上门访问',
    medical: '医疗干预',
    isolation: '隔离观察',
    other: '其他方式'
  };
  return actionMap[action] || action;
};
</script>